<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业微信机器人消息发送助手</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>企业微信机器人消息发送助手</h1>
            <button id="createTaskBtn" class="btn primary-btn">创建新任务</button>
        </header>

        <main>
            <section id="taskListSection">
                <h2>任务列表</h2>
                <div id="taskList" class="task-list">
                    <!-- 任务列表将通过JavaScript动态生成 -->
                    <div class="loading">加载任务中...</div>
                </div>
            </section>
        </main>
    </div>

    <!-- 创建/编辑任务的模态框 -->
    <div id="taskModal" class="modal">
        <div class="modal-content">
            <span class="close-btn">&times;</span>
            <h2 id="modalTitle">创建新任务</h2>
            <form id="taskForm">
                <input type="hidden" id="taskId">
                <div class="form-group">
                    <label for="title">任务标题:</label>
                    <input type="text" id="title" name="title" required>
                </div>
                <div class="form-group">
                    <label for="messageType">消息类型:</label>
                    <select id="messageType" name="messageType" required>
                        <option value="text">文本消息</option>
                        <option value="news">图文消息</option>
                    </select>
                </div>
                <div class="form-group" id="textContentGroup">
                    <label for="textContent">文本内容:</label>
                    <textarea id="textContent" name="textContent" rows="5" required></textarea>
                </div>
                <div class="form-group" id="newsContentGroup" style="display: none;">
                    <label for="newsContent">图文内容 (JSON格式):</label>
                    <textarea id="newsContent" name="newsContent" rows="10" placeholder='示例: [{"title":"标题","description":"描述","url":"链接","picurl":"图片链接"}]'></textarea>
                    <p class="help-text">请输入符合格式的JSON数组，每个元素必须包含title、description、url和picurl字段</p>
                </div>
                <div class="form-group">
                    <label for="webhookUrl">Webhook URL:</label>
                    <input type="text" id="webhookUrl" name="webhookUrl" required>
                </div>
                <div class="form-actions">
                    <button type="submit" class="btn primary-btn">保存</button>
                    <button type="button" class="btn cancel-btn" id="cancelBtn">取消</button>
                </div>
            </form>
        </div>
    </div>

    <script src="app.js"></script>
</body>
</html>